<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css"></link>
</head>
<body>
<main id="app" class="dark">
  <header>
    <h1>A Gooey button</h1>
    <p>Hover to experience! (single element)</p>
  </header>
  <div>
    <button type="button">
      Gooey Button
    </button>
  </div>
  <p>Inspired by <em>(and svg filter copied from)</em> <a target="_blank" href="https://codepen.io/thebabydino/pen/NWVdKaG">Ana's codepen</a>, go give her a ❤️ !</p>
</main>
<svg width="0" height="0" style="position: absolute;">
  <filter id="goo" x="-50%" y="-50%" width="200%" height="200%">
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1"></feFuncA>
    </feComponentTransfer>
    <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    <feComponentTransfer>
      <feFuncA type="table" tableValues="-5 11"></feFuncA>
    </feComponentTransfer>
  </filter>
</svg>



</body>
<script src="index.js"></script>
</html>
